<template>
  <view class="withdraw-container">
    <scroll-view scroll-y class="scroll-view">
      <view class="content-area">
        <!-- 到账账户行 -->
        <view class="account-row" @click="chooseAccount">
          <view class="left">到账账户</view>
          <view class="right">
            <text class="desc">原路返回，预计24小时内到账</text>
            <uv-icon name="arrow-right" size="16" color="#999" />
          </view>
        </view>

        <!-- 金额输入卡片 -->
        <view class="amount-card">
          <view class="amount-row">
            <text class="currency">¥</text>
            <uv-input
              v-model="amount"
              type="digit"
              placeholder=""
              :border="false"
              :clearable="true"
              input-align="left"
              :custom-style="inputStyle"
            />
          </view>
          <view class="helper-row">
            <text class="helper-left">可提现余额¥{{ withdrawable.toFixed(2) }}</text>
            <text class="helper-action" @click="withdrawAll">全部提现</text>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部提交按钮 -->
    <view class="bottom-action">
      <uv-button
        type="primary"
        text="立即提现"
        size="large"
        :custom-style="buttonStyle"
        @click="submitWithdraw"
      />
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRequest } from '@/api'
const { GET_LIST_WITHDRAWALE } = useRequest()
import { UserInfoManager } from '@/utils/userInfo'
const userInfo = UserInfoManager.getUserInfo()
const themeColor = '#FF6B35'
const withdrawable = ref(0)
const amount = ref('')

const inputStyle = {
  backgroundColor: '#ffffff',
  padding: '0',
  fontSize: '56rpx',
  color: '#1f1f1f',
  fontWeight: '700'
}

const buttonStyle = {
  backgroundColor: themeColor,
  borderColor: themeColor,
  height: '96rpx',
  borderRadius: '48rpx',
  fontSize: '32rpx',
  fontWeight: '600'
}

const chooseAccount = () => {
  uni.showToast({ title: '原路返回到账', icon: 'none' })
}

const withdrawAll = () => {
  amount.value = String(withdrawable.value)
}

const submitWithdraw = async() => {
  const val = Number(amount.value)
  if (!val) {
    uni.showToast({ title: '请输入提现金额', icon: 'none' })
    return
  }
  if (val <= 0) {
    uni.showToast({ title: '金额需大于0', icon: 'none' })
    return
  }
  if (val > withdrawable.value) {
    uni.showToast({ title: '超过可提现余额', icon: 'none' })
    return
  }
  const params ={
    isdriver: UserInfoManager.lastrole(),
    money:val,
  }
 const res = await GET_LIST_WITHDRAWALE(params)
 if(res.code ===1){
  uni.navigateBack()
 }
}
onMounted(()=>{
  withdrawable.value = Number(userInfo.balance)
})
</script>

<style lang="scss" scoped>
.withdraw-container {
  min-height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.scroll-view { flex: 1; }
.content-area { padding: 0 24rpx; }

/* 到账账户 */
.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}
.account-row .left {
  font-size: 30rpx;
  color: #1f1f1f;
  font-weight: 600;
}
.account-row .right { display: flex; align-items: center; gap: 10rpx; }
.account-row .desc { font-size: 28rpx; color: #8c8c8c; }

/* 金额卡片 */
.amount-card {
  padding: 24rpx 0 0;
}
.amount-row {
  display: flex;
  align-items: baseline;
  gap: 8rpx;
  padding: 40rpx 0 16rpx;
  border-bottom: 2rpx solid #f2f2f2;
}
.currency {
  font-size: 42rpx;
  color: #1f1f1f;
  font-weight: 700;
}

.helper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18rpx 0;
}
.helper-left { font-size: 26rpx; color: #666; }
.helper-action { font-size: 26rpx; color: #FF6B35; }

.bottom-action{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 32rpx;
  background: #fff;
  box-shadow: 0 -2rpx 8rpx rgba(0,0,0,.05);
}

:deep(.uv-input__input){ font-size: 56rpx !important; font-weight: 700 !important; color:#1f1f1f !important; }
</style>
